---
import { Image } from 'astro:assets'
import AppLayout from './AppLayout.astro'
import LogoWithText from '$assets/logo/threlte-logo.png'
import Socials from '$components/Socials/Socials.astro'
import MobileMainNav from '$components/Menu/MobileMainNav.svelte'
import Footer from '$components/Footer/Footer.astro'

export interface Props {
  title: string
}

const title = Astro.props.title

const isBlog = Astro.url.pathname.startsWith('/blog')
---

<AppLayout {title}>
  <!-- Desktop Nav -->
  <div
    class="z-5 fixed left-0 top-0 h-[var(--docs-navbar-height)] w-screen border-b border-blue-900/0 bg-[#0A0F19]"
  >
    <!-- bottom gradient -->
    <div
      class="bg-linear-to-b pointer-events-none absolute left-0 top-full h-[10svh] w-full from-[#0A0F19] to-transparent"
    >
    </div>
  </div>

  <header
    class="fixed z-10 hidden h-[var(--docs-navbar-height)] w-screen flex-row items-center justify-between border-b border-blue-900/0 px-6 md:flex"
  >
    <!-- Header Left -->
    <div class="flex flex-row items-center gap-12">
      <a href="/">
        <Image
          src={LogoWithText}
          alt="threlte logo"
          width={152}
          height={37}
          class="h-[37px] w-auto"
        />
      </a>

      <nav class="text-faded flex translate-y-px flex-row gap-5">
        <!-- Implement as soon as there are showcase entries -->
        <!-- <a href="/showcase">Showcase</a> -->
        <a
          class="hover:text-white"
          href="/docs/learn/getting-started/introduction"
          >Documentation</a
        >
        <a
          class="hover:text-white"
          class:list={[isBlog && 'text-orange']}
          href="/blog"
          >Blog</a
        >
      </nav>
    </div>

    <!-- Header Right -->
    <div class="flex flex-row gap-5">
      <Socials />
    </div>
  </header>

  <!-- Mobile Nav -->
  <MobileMainNav client:load>
    <Image
      slot="logo"
      src={LogoWithText}
      alt="threlte logo"
      width={152}
      height={37}
      class="h-[37px] w-auto"
    />
    <Socials slot="socials" />
  </MobileMainNav>

  <slot name="external" />

  <main class="mx-auto max-w-7xl px-6 pb-12 pt-[10svh]">
    <slot />
  </main>

  <Footer class="mx-auto border-t border-white/20 px-6 py-12" />
</AppLayout>
